


Fanworks & Image Accessibility

by JaneNightwork



Category: No Fandom
Genre: Gen
Language: English
Status: Completed
Published: 2020-04-15
Updated: 2020-04-15
Packaged: 2021-03-01 18:34:31
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,522
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/23621641
Author URL: https://archiveofourown.org/users/JaneNightwork/pseuds/JaneNightwork
Summary: This is a handy guide on how to create alt-text for images posted on AO3 and twitter.





	Fanworks & Image Accessibility

So you want to write engaging, amazing, multi-media fanworks? And you want to make sure that everyone can enjoy your fanworks, but you’re not sure how to make them fully accessible? Never fear! The concept of creating image descriptions can feel daunting at first, but I promise it isn’t hard. 

A note on terms: in my professional life I refer to image descriptions as “alt text,” short for “alternative text.” The term “image descriptions” is also popular. As far as I know both are equally useful/interchangeable. From here on I’ll be using the term “alt text” since it’s what I’m used to. (If there’s a term preferred by folks who use screen readers, please let me know!) 

The most helpful bit of advice I can offer is also the simplest: put yourself in the shoes of someone who wants to enjoy your fanworks, but can’t see them. Folks who have either limited or no vision use software called a screen reader, which does exactly what it sounds like––it reads everything that’s on the screen. It also reads coding like heading styles and alt text. But if there is no alt text, your audience member has no idea of what’s going on. The screen reader will just say “image,” and then move along. That would feel pretty alienating. Even more so if the image is integral to the plot in some way. 

There are criteria for how to write alt text, but before diving into them the best approach is simply to ask yourself: why did I create this image, and what do I want my audience to get from it? Is there dialogue (as in a screenshot of text messages), a visual representation of the story’s vibe (as in a moodboard), or something else? What do you want your audience to be thinking and feeling as a result of the image? That’s the hardest part! From there all you need is a bit of technical knowhow. 

# How to Craft Alt Text

So now that we know the philosophical approach (ensure that your visually-impaired audience gets the same _information_ and _enjoyment_ as everyone else)...how do we actually write the thing? Let’s start with some do’s and don’ts. 

Do

  * Take some time––as little as a few seconds, as long as a few minutes––just staring at the image and asking yourself what you want it to convey.
  * Notice details about the image. If it’s a photo, how would you describe the expression of the person? Are there significant differences between the foreground and background? 
  * Write a description that captures the energy of the image, if applicable. (A stock image of a refrigerator will have a much shorter description than a hand painted watercolor fanart illustration of XYZ Character drinking out of the milk carton in their underwear while the refrigerator door hangs open.)
  * Ask yourself where the image comes from, and whether that’s relevant to the description. Is it a stock image, a glamor photoshoot, a piece of fanart, a screenshot? This won’t always be relevant, but if it is it can add a nice depth to the alt text.
  * Write in complete sentences. This one isn’t a universal standard, but I find I like providing complete sentences as opposed to one-word phrases like “fridge.”
  * Allow yourself to write in passive voice. For writers this is a tough one, because we’re taught to use active voice as much as possible. But the phrases “An image shows…” or “...is shown” are extremely useful. Don’t be afraid to use them!
  * Include sensory details that aren’t based on sight. Note if something is large or small, for example, or describe texture if they’re important. A fanart for a Pride & Prejudice modern au which shows an outdoor picnic might go like this: “An image shows Elizabeth and Mr. Darcy in modern dress. They smile at each other while lying on a blanket in the park as they enjoy a picnic on a warm summer day.” None of those details are reliant on sight, but all of them convey the vibe of the image. 



Don’t

  * Don’t feel like you have to include _every single detail_ in an image for the alt text to be robust. In the example of the Pride & Prejudice fanart above, don’t feel like you have to include that there is one oak, one sycamore, and one weeping willow tree in the background of the illustration. A good rule of thumb is that if you don’t care and don’t notice, no one else needs to care or notice. 
  * Try not to rely too much on sight-based details, especially color. In an example below where I model how to include alt text in twitter, I use three colors. This is way more than I usually use, and to be honest if I was doing the alt text for anything other than a how-to screenshot I’d probably rewrite to take the colors out. (Sorry!)
  * Try to keep the alt text as short as possible. I know that sounds like a contradiction to my earlier advice, given everything I’ve asked you to include. But remember that someone using a screenreader just wants to know what the image is and what it means––they don’t want to spend any more time on the image than a sighted audience member would. So don’t feel like you need to include a dissertation on every detail.
  * Most importantly of all, don’t get intimidated. You’re doing something that gives more people the opportunity to enjoy your fanworks, and creates a more inclusive fan community. This is a good thing! You’re not going to be graded on professional-level alt text any more than you’d be judged over non-professional fanworks. Enjoy yourself and have fun.



Writing alt text isn’t difficult, but because it’s both a science and an art, it takes practice. Don’t let that discourage you from starting! There’s no shame in getting better as you go, just like any other aspect of transformative fanworks. To get you started, here are some images and the alt text I’d provide for them.

Alt text: A promotional image from the play “Burn This” shows Adam Driver with long hair and a short beard. He wears a button-down shirt and smolders at the camera.  


Alt text: An image from the beginning of the film “The Force Awakens” shows Rey holding her staff and wearing a determined expression.  


For moodboards, definitely remember the “convey the vibe” and “you don’t have to describe everything in excruciating detail” rules. 

Alt text: A moodboard for the fic “How to Keep Christmas” shows mistletoe and chocolates, along with Ben, Rey, Rose, Finn, and Poe looking festive.  


For text message screenshots in twitter fics, just transcribe the whole thing. For clarity’s sake it’s okay to shorten or rephrase things. 

Alt text: A text message exchange between Holdo and Leia is shown. 

Holdo: I am going to find that “pitbulls are inherently dangerous” congressman, Leia. I am going to find him and kick him in the balls until he chokes up blood. 

Leia: Honey you can’t tell me that; what if I get subpoenaed? 

Leia: Hypothetically speaking, though, you could ask Han to do it. I can’t testify against him. 

Holdo: I’ll take it under advisement. Of course if you ran for President you could grant me a pardon. 

Leia responds with a winky emoji.  


# Twitter

Most of the technical how-to’s can be found [ on this page ](https://help.twitter.com/en/using-twitter/picture-descriptions) in Twitter’s help section, but I’m going to go through the steps to illustrate anyway. 

## On laptop/desktop:

  1. Before composing your tweet, go to your account’s Settings, Accessibility, and then tap the radio button for “Compose image descriptions.”
  2. Compose your tweet and add the image as usual. Then click the “Add Description” button.
  3. Add your alt text.
  4. That’s it! Publish as normal. 
  5. A note about textfics/other screenshot-based fanworks on twitter: as you see, twitter limits your alt text to 420 characters. This is a bummer because text exchanges will often exceed that, and there’s really no way around it. My best advice is to consider also publishing to AO3, which allows for longer alt text. This can be done either while the textfic is updating on twitter or after! Totally up to you.



## On iOS

  1. Very much the same as desktop. Ensure that your settings are configured, then compose your tweet and include your image.
  2. Tap the ALT button on the bottom right of the image.
  3. Type in your desired alt text.  
  
  

  4. Tap Done, and that’s it! Publish as normal. 



# AO3

## Images

  1. It’s easiest to do this in the Rich Text editor. Add your image as usual. 
  2. Post your alt text in the Image Description field. Do better than this crappy one of mine.
  3. That’s it! Publish as normal. 



## Coding

AO3 also has a number of accessibility-friendly coding options available for stories. While they won’t necessarily make or break your audience’s experience if they’re using a screen reader, it’s good to keep them in mind. They can be found [ here ](https://archiveofourown.org/faq/formatting-content-on-ao3-with-html?language_id=en). 

# Other Resources

[ WCAG Standards (the most official standards for online accessibility) ](https://www.w3.org/WAI/standards-guidelines/wcag/)

[ OTW's Committees and Newsletter page, including accessibility info ](https://www.transformativeworks.org/committees/#adt)

[ Twitter's accessibility help page ](https://help.twitter.com/en/using-twitter/picture-descriptions)


End file.
